<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="1000px"
    :fullscreen="fullscreenFlag"
    :gpsId="gpsId"
    :before-close="cancel"
  >
    <i
      class="el-icon-copy-document fullScreenIcon"
      v-if="fullscreenFlag"
      @click="fullSreenFn(false)"
    ></i>
    <i
      class="el-icon-full-screen fullScreenIcon"
      v-else
      @click="fullSreenFn(true)"
    ></i>
    <baidu-map
      class="map"
      ak="PqqeGMn6pNyvOxnWwVLyexHQjwMtuzLn"
      :center="map.center"
      :zoom="map.zoom"
      @ready="handler"
    >
      <!--缩放-->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
      <!--定位-->
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>
      <!--点-->
      <bm-marker
        :position="map.center"
        :icon="{ url: '/img/car.png', size: { width: 25, height: 50 } }"
        :rotation="map.rotation"
        animation="BMAP_ANIMATION_DROP"
        @click="infoWindowOpen"
      >
      <!--提示信息-->
      <bm-info-window
          style="width: 280px"
          :show="map.show"
          @close="infoWindowClose"
        >
          <br />
          <table class="car" border="0px" cellpadding="0" cellspacing="0">
            <tr>
              <td>当前位置：</td>
              <td>{{ gpsInfo.addressDetail }}</td>
            </tr>
            <tr>
              <td>车速(km/h)：</td>
              <td>{{ gpsInfo.speed }}</td>
            </tr>
            <tr>
              <td>车辆当前状态：</td>
              <td>{{ gpsInfo.status }}</td>
            </tr>
            <tr>
              <td>设备在线状态：</td>
              <td>{{ gpsInfo.online }}</td>
            </tr>
            <tr>
              <td>设备定位时间：</td>
              <td>{{ gpsInfo.gpsTime }}</td>
            </tr>
            <tr>
              <td>经度：</td>
              <td>{{ gpsInfo.lon }}</td>
            </tr>
            <tr>
              <td>纬度：</td>
              <td>{{ gpsInfo.lat }}</td>
            </tr>
            <tr>
              <td>里程(km):</td>
              <td>{{ gpsInfo.mileage }}</td>
            </tr>
          </table>
        </bm-info-window>
      </bm-marker>
    </baidu-map>
  </el-dialog>
</template>

<script>
export default {
  name: "GpsCar",
  props: {
    title: String,
    open: Boolean,
    gpsInfo: Object,
  },
  data() {
    return {
      map: {
        center: { lng: 117.235656, lat: 34.2983 },
        zoom: 11,
        show: true,
        dragging: true,
        rotation: null,
      },
      fullscreenFlag: false,
      gpsId: "",
    };
  },
  watch: {
    gpsInfo: {
      // 监控该变量，重新赋值并刷新图表
      handler(newVal, oldVal) {
        this.gpsInfo = newVal;
        this.getInfo();
      },
      deep: true, // 必须设置
    },
  },
  methods: {
    getInfo() {
      this.map.center.lng = this.gpsInfo.lon;
      this.map.center.lat = this.gpsInfo.lat;
      this.map.rotation = this.gpsInfo.direct;
    },
    cancel() {
      this.$emit("close");
      this.infoWindowOpen()
    },
    // 是否允许全屏
    fullSreenFn(e) {
      this.fullscreenFlag = e;
    },
    handler({ BMap, map }) {
      // 鼠标缩放
      map.enableScrollWheelZoom(true);
    },
    // 关闭弹窗
    infoWindowClose() {
      this.map.show = false;
    },
    // 打开弹窗
    infoWindowOpen() {
      this.map.show = true;
    },
  },
};
</script>

<style scoped>
.map {
  width: 100%;
  height: 500px;
}
.car {
  width: 100%;
  height: 100%;
  /* background-color: green; */
  margin-top: -10px;
}
.car tr td:first-child {
  width: 100px;
  text-align: right;
  font-size: 13px;
}
.car tr td:last-child {
  color: blue;
  font-size: 12px;
}
</style>